<template>
    <div style="width: 100%;float: center;display: flex;justify-content: flex-end;">
            <!-- 编辑群信息 -->
            <div class="right-frame">
                <div class="flexcen" style="position: absolute;width: 100%;margin-top: 687px;" v-if="detail.finish == 0">
                <div class="frame-button-send flexcen" style="background: #FFFFFF;color: #0052D9;border: 0.5px solid #0052D9;margin-right: 12px;" @click="submit" >驳回</div>
                <div class="frame-button-send flexcen" @click="submit" >通过</div>
                </div>
                <!-- 编辑群信息 -->
                <div class="right-frame-title flexal">
                    <img :src="require('@/assets/img/right.png')"  style="width: 10px;height: 16px;transform: rotate(180deg)" @click="submit"/>
                    <div  class="right-tips-text" style="font-size: 17px;margin-left: 20px;color: #333333;">审批</div>
                    <div style="flex: 1;font-weight: 400;font-size: 13px;color: #858585;margin-left: 58px;">2024-08-01</div>
                    <img :src="require('@/assets/img/cancel.png')"  style="width: 18px;height: 18px;" @click="submit" />
                </div>

                <!-- 编辑群信息 -->
                 <div v-infinite-scroll="scrollLoad"  :style="{'overflow':'auto','height':detail.finish == 0? '620px':'690px'}">
                <div class="right-frame-title flexal">
                    <div  style="flex: 1;">
                        <div style="font-weight: 400;font-size: 18px;color: #000000;">员工名称提交的请假申请</div>
                        <div style="font-weight: 400;font-size: 11px;color: #999999;margin-top: 5px;">所在的部门名称</div>
                        <div style="font-weight: 400;font-size: 13px;color: #FF862A;margin-top: 10px;" v-if="detail.finish == 0">审批中</div>
                        <div style="font-weight: 400;font-size: 13px;color: #27C216;margin-top: 10px;" v-if="detail.finish == 1">审批已通过</div>
                        <div style="font-weight: 400;font-size: 13px;color: #D54941;margin-top: 10px;" v-if="detail.finish == 2">审批已拒绝</div>
                    </div>
                    <img :src="require('@/assets/img/in-review.png')"  style="width: 73px;height: 73px;" v-if="detail.finish == 0"/>
                    <img :src="require('@/assets/img/pass.png')"  style="width: 73px;height: 73px;" v-if="detail.finish == 1"/>
                    <img :src="require('@/assets/img/refuse.png')"  style="width: 73px;height: 73px;" v-if="detail.finish == 2"/>
                </div>
                <div class="right-line-bottom" style="width: 100%;margin-left: 0px;"></div>

                <div style="margin-top: 14px;margin-left: 15px;font-weight: 400;font-size: 14px;color: #272B34;">请假日期：</div>

                <div style="display: flex;flex-wrap: wrap;">
                <div class="frame-time-list flexcen">2021年09月22日 周一</div>
                <div class="frame-time-list flexcen">2021年09月22日 周一</div>
                <div class="frame-time-list flexcen">2021年09月22日 周一</div>
                <div class="frame-time-list flexcen">2021年09月22日 周一</div>
                </div>

                <div style="margin-top: 14px;margin-left: 15px;font-weight: 400;font-size: 14px;color: #272B34;">请假事由：</div>
                <div class="frame-audit-content">
                    家里突发情况，需要回家处理家里突发情况，需要回家处理家里突发情况，需要回家处理家里突发情况，需要回家处理家里突发情况，需要回家处理
                </div>
                
                <div style="margin-top: 14px;margin-left: 15px;font-weight: 400;font-size: 14px;color: #272B34;">审批流程：</div>

                <div style="height: 24px;width: 100%;"></div>

                <div style="display: flex;margin-left: 28px;">
                    <img :src="avatar"  style="width: 45px;height: 45px;border-radius: 50%;" />
                    <div style="margin-left: 9px;flex: 1;">
                        <div style="font-size: 15px;color: #000000;">发起申请</div>
                        <div style="font-size: 12px;color: #666666;">员工</div>
                    </div>
                    <div style="font-size: 11px;color: #666666;margin-right: 26px;">2024-09-15 12:00</div>
                </div>

                <div class="flexal">
                    <div class="frame-stand"></div>
                    <div class="frame-across"> </div>
                </div>
                <div style="display: flex;margin-left: 28px;">
                    <img :src="avatar1"  style="width: 45px;height: 45px;border-radius: 50%;" />
                    <div style="margin-left: 9px;flex: 1;">
                        <div style="font-size: 15px;color: #000000;">直属审批</div>
                        <div style="font-size: 12px;color: #666666;">领导名称（审核中）</div>
                    </div>
                    <div style="font-size: 11px;color: #666666;margin-right: 26px;">2024-09-15 12:00</div>
                </div>
            </div>
            </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'audit',
    props: {
        detail:{
            type: Object,
            default: {}
        }
    },
    data(){
        return{
            input:'',
            avatar:'https://luosai.oss-cn-shenzhen.aliyuncs.com/Upload/2024/0730/202407301050133207.jpg',
            avatar1:'https://cdn.uviewui.com/uview/album/7.jpg'
        }
    },
    methods:{
        // 发送/关闭，按钮回调  0:关闭  1:发送
        submit(){
            // var params = {
            //     type:0,
            //     data:this.input
            // }
            this.$emit('auditSubmit',0)
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
    .right-frame{
        margin-top: 0px;
        position: absolute;
        width: 457px;
        height: 750px;
        background: #F8F9FA;
        z-index: 101; /* Ensure it sits on top of other content */

        .title-text{
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        }
        .right-frame-title{
            padding: 15px 16px;
        }
        .right-line-bottom{
            margin-left: 16px;
            width: 424px;
            height: 0px;
            border: 1px solid #707070;
            opacity: 0.32;
        }
        .right-tips-text{
            font-weight: 400;
            color: #6B6B6B;
            font-size: 14px;
        }
        .el-button {
            // width: 96px;
            // height: 45px;
            padding: 0px 0px;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, 0.3);
            font-size: 24px;
            color: rgba(255, 255, 255, 1);
            border: transparent;
            overflow: hidden;
        }

        .title-qrCode-frame{
            position: absolute;
            margin-left: -300px;
            z-index: 101; /* Ensure it sits on top of other content */
            width: 302px;
            height: 412px;
            // background: #FFFFFF;
            background-image: url('../../assets/img/navigation/qrCode-frame.png'); /* 替换为实际的图片路径 */
            background-size: cover; /* 确保背景图像覆盖整个容器 */
            background-position: center; /* 将背景图像居中对齐 */
            background-repeat: no-repeat; /* 避免背景图像重复 */
            box-shadow: 0px 3px 20px 1px rgba(0,0,0,0.17);
            border-radius: 16px 16px 16px 16px;
        }
        
        .saveQrCode{
            width: 132px;
            height: 39px;
            background: #FFFFFF;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #0052D9;
            font-size: 12px;
            color: #0052D9;
        }

        .shareQrCode{
            margin-left: 10px;
            width: 132px;
            height: 39px;
            background: #0052D9;
            border-radius: 8px 8px 8px 8px;
            color: #FFFFFF;
            font-size: 12px;
        }

        .frame-time-list{
            margin-left: 13px;
            margin-top: 14px;
            width: 130px;
            height: 19px;
            background: #FFFFFF;
            border-radius: 8px 8px 8px 8px;
            border: 2px solid #366EF4;
            font-weight: 400;
            font-size: 11px;
            color: #366EF4;
        }

        .frame-audit-content{
            padding: 20px 44px;
        }
        .frame-stand{
            margin-left: 50px;
            margin-top: 4px;
            margin-bottom: 4px;
            margin-right: 30px;
            width: 1px;
            height: 24px;
            background: #D6D6D6;
            border-radius: 0px 0px 0px 0px;
        }
        .frame-across{
            width: 376px;
            height: 1px;
            background: #C9C9C9;
            border-radius: 0px 0px 0px 0px;
        }
    }
    .frame-button-send{
     
        width: 122px;
        height: 47px;
        background: #0052D9;
        border-radius: 16px 16px 16px 16px;
        font-size: 16px;
        color: #FFFFFF;
    }

    /deep/.el-textarea__inner {
    background: #F1F1F1;
    min-height: 114px;
    border-radius: 16px;
   }
  </style>
  